<template>
    <div class="bottom-btn-common">
        <div class="bottom-btn-items" v-if="footerBar == 'movie'">
            <img src="../static/img/images/movie-red.png"/>
            <p style="color:#ff4d64;">{{$t('m.Movie')}}</p>
        </div>
        <div class="bottom-btn-items" v-else @click.stop="$router.push('/movie/movie-list')">
            <img src="../static/img/images/movie-gray.png"/>
            <p style="color:#999999;">{{$t('m.Movie')}}</p>
        </div>
        <div class="bottom-btn-items" v-if="footerBar == 'cinema'">
            <img src="../static/img/images/cinema-red.png"/>
            <p style="color:#ff4d64;">{{$t('m.Cinema')}}</p>
        </div>
        <div class="bottom-btn-items" v-else @click.stop="$router.push('/movie/cinema-list')">
            <img src="../static/img/images/cinema-gray.png"/>
            <p style="color:#999999;">{{$t('m.Cinema')}}</p>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Footer',
        props: [
            'footerBar'
        ],
        data() {
            return {};
        },
        methods: {
        },
    }

</script>
<style scoped>
    .bottom-btn-common {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 56px;
        line-height: 56px;
        background: #fff;
        border-top: 1px solid #e5e5e5;
        /*box-shadow:-2px -2px 3px #ddd;*/
    }

    .bottom-btn-items {
        width: 50%;
        text-align: center;
        /*padding: 9px 0;*/
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .bottom-btn-items img {
        height: 38px;
        width: 41.3px;
        display: block;
        margin: 0 auto;
    }
    .bottom-btn-items p{
        line-height: 16px;
        margin: 0;
        font-size: 12px;
    }

    .bottom-btn-items .icon-box img {
        width: 29px;
        height: 29px;
    }

    .bottom-btn-items.can-click:active {
        background: #e5e5e5;
    }

    .bottom-btn-items.center {
        position: relative;
    }

    .bottom-btn-items.center img {
        height: auto;
    }

    .bottom-btn-items.center span {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        line-height: 14px;
        font-size: 14px;

    }

    .bottom-btn-items.center .center-icon {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 16px;
    }

    .bottom-btn-items.center .icon-box {
        width: 55px;
        height: 55px;
        margin: 0 auto;
        background: #FF8820;
        padding-top: 8px;
        box-sizing: border-box;
        border-radius: 50%;
    }

    .message-chat {
        position: relative;
        display: inline-block;
        height: 38px;
        width: 41.3px;
    }

    .message-number {
        color: #fff;
        right: -5px;
        top: 1px;
        font-size: .6em;
        /*padding: 0 .5em;*/
        text-align: center;
        width: 1.4em;
        height: 1.4em;
        line-height: 1.4;
        position: absolute;
        border-radius: .6em;
        box-sizing: border-box;
        background-color: #f44;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
    }
</style>
